<template>
	<view v-if="data">
		<!-- 标题 -->
		<view class="lname">{{ details.lname }}</view>
		<!-- 轮播图 -->
		<swiper
			circular
			indicator-dots
			autoplay
			:interval="3000"
			:duration="1000"
			style="width: 100%;height: 700rpx;"
		>
			<swiper-item v-for="(item, index) in picList" :key="index">
				<image
					style="width: 100%;height: 100%;"
					:src="`http://www.codeboy.com:9999/${item.md}`"
				></image>
			</swiper-item>
		</swiper>
		<view style="padding: 15rpx;">
			<!-- 商品信息 -->
			<view style="font-weight: bold;">{{ details.title }}</view>
			<!-- 商品介绍 -->
			<view style="color:gray;font-size: 0.9em;">
				{{ details.subtitle }}
			</view>
			<!-- 价格 -->
			<view style="color:red;font-size: 1.1em;font-weight: bold;">
				¥{{ details.price }}
			</view>
			<!-- 推荐商品 -->
			<uni-collapse>
				<uni-collapse-item title="更多相关商品推荐" open>
					<uni-list>
						<uni-list-item
							:to="
								`/pages/goods-details/goods-details?lid=${
									item.lid
								}`
							"
							v-for="(item, index) in laptopList"
							:key="index"
							:title="item.spec"
							showArrow
							clickable
						></uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</uni-collapse>
			<!-- 商品广告图 -->
			<view v-html="html_details"></view>
			<!-- 加一个空白的容器  把商品导航盖住部分顶出来 -->
			<view style="height: 100rpx;"></view>
			<!-- 商品导航 -->
			<uni-goods-nav style="position: fixed;bottom: 0;width: 100%;" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: null
		};
	},
	onLoad(options) {
		const lid = options.lid;
		this.getData(lid);
	},
	methods: {
		getData(lid) {
			const url =
				'http://www.codeboy.com:9999/data/product/details.php?lid=' +
				lid;
			// console.log(url);
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res);
					this.data = res.data;
					console.log(this.data);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		// 商品详情信息
		details() {
			return this.data.details;
		},
		// 轮播图
		picList() {
			return this.details.picList;
		},
		// 推荐其他商品
		laptopList() {
			return this.data.family.laptopList;
		},
		// html
		html_details() {
			let html = this.details.details;
			// 替换修改html里的字符串
			// 1.添加图片的域名  2.图片的宽度进行限制  3.添加协议头  http:// https://
			// src="img/product/detail/57b15612N81dc489d.jpg">
			html = html.replace(
				/src="img/g,
				'src="http://www.codeboy.com:9999/img'
			);
			html = html.replace(/<img/g, '<img width="100%"');
			html = html.replace(/src=\/\/img20/g, 'src="https://img20"');
			// console.log(html);
			return html;
		}
	}
};
</script>

<style scoped lang="scss">
.lname {
	background-color: white;
	font-size: 1.2em;
	border-bottom: 1px solid #b1b1b1;
	padding: 10rpx;
}
</style>
<!-- "<div class="content_tpl"> <div class="formwork">   <div class="formwork_img"><br></div><div class="formwork_img">    <img alt="" class="" src="img/product/detail/57b15612N81dc489d.jpg">   </div>  </div>  <div class="formwork">   <div class="formwork_img">    <img alt="" class="" src="//img20.360buyimg.com/vc/jfs/t2683/60/4222930118/169462/233c7678/57b15616N1e285f09.jpg">   </div>  </div>  <div class="formwork">   <div class="formwork_text">    技术规格请前往 www.apple.com/cn/macbook-air/specs.html 查看完整内容。</div></div></div>" -->
